import React, { Component } from 'react';
import { Form, Row, Col, Button, Modal, Icon } from 'antd';
import ShowType from '../../../routes/common/showType';
import * as commonFunc from '../../Common/commonFunc';
import styles from '../../../index.less';
import * as config from '../../../utils/config';
import ReceiptPopup from './ReceiptPopup';

const FormItem = Form.Item;

class TabMainTableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      masterConfig: props.masterConfig, /* 配置 */
      formData: props.formData,
      sId: props.sId, /* 业务数据Id */
      dataList: [], /* 数据 */
      sActiveId: props.sActiveId, /* 窗体Id */
      disabled: props.disabled, /* 是否是查看状态 */
      sBillType: '', /* 收款对象 */
      sCustomerId: '', /* 客户编号(*) */
      sContacts: '', /* 联系人 */
      sPhone: '', /* 电话 */
      sBillNo: '', /* 客户订单号 */
      tCreateDate: '', /* 制单日期 */
      sMakePerson: '', /* 制单人 */
      sSalesManId: '', /* 销售员 */
      sMemo: '', /* 备注 */
      bAdvance: '', /* 预收款 */
      sSalesId: '', /* 对应原单号 */
      dTotalMoney: '', /* 金额 */
      dAccountReceivable: '', /* 应收款-伪字段 */
      dExpireReceivable: '', /* 到期应收-伪字段 */
      sSettlementId: '', /* 收款条件 */
      sBankId: '', /* 银行 */
      sBankAccount: '', /* 银行号码 */
      tDueDate: '', /* 票据到期日期 */
      gdsformconst: props.gdsformconst,
      sModalName: '',
      receiptVisible: false,
      shareDisabled: true,
      receiptData: props.dataSet,
      reserveContent: '',
      expand: false,
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const {
      masterConfig, sActiveId, sId, componentName, sTabId, gdsformconst, receiptData,
    } = this.state;
    const sModalNameFilter = gdsformconst.filter(item => item.sName === 'modalReceipt');
    if (sModalNameFilter.length > 0) {
      const sModalName = sModalNameFilter[0].showName;
      this.setState({ sModalName });
    }
    const { dispatch } = this.props;
    if (sId !== undefined && sId !== '') {
      const mainId = masterConfig.sId;
      /* 表Id */
      const value = { sId, pageSize: '', pageNum: '' };
      /* 业务数据Id */
      const dataUrl = `${config.server_host}business/getBusinessDataByFormcustomId/${mainId}?sModelsId=${sActiveId}`;
      dispatch({
        type: 'content/getUrlPostData',
        payload: {
          url: dataUrl, sTabId, componentName, value, formRoute: '/cahreceiptmaster', returnType: 'data',
        },
      });
    } else if (sId === '' && this.props.newIdFlag) {
      const url = `${config.server_host}getUuid/${this.props.newIdlength}`;
      dispatch({
        type: 'content/getCopyDataId',
        payload: {
          sTabId, url, formRoute: '/cahreceiptmaster', componentName,
        },
      });
    }
    if (masterConfig.gdsconfigformslave !== undefined) {
      const mainConfig = masterConfig.gdsconfigformslave;
      this.setState({
        sId: sId !== undefined ? sId : '',
        sBillType: mainConfig.filter(item => (item.sName.toLowerCase() === 'sbilltype'))[0],
        sCustomerId: mainConfig.filter(item => (item.sName.toLowerCase() === 'scustomerid'))[0],
        sContacts: mainConfig.filter(item => (item.sName.toLowerCase() === 'scontacts'))[0],
        sPhone: mainConfig.filter(item => (item.sName.toLowerCase() === 'sphone'))[0],
        sBillNo: mainConfig.filter(item => (item.sName.toLowerCase() === 'sbillno'))[0],
        tCreateDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tcreatedate'))[0],
        sMakePerson: mainConfig.filter(item => (item.sName.toLowerCase() === 'smakeperson'))[0],
        sSalesManId: mainConfig.filter(item => (item.sName.toLowerCase() === 'ssalesmanid'))[0],
        sMemo: mainConfig.filter(item => (item.sName.toLowerCase() === 'smemo'))[0],
        dAccountReceivable: mainConfig.filter(item => (item.sName.toLowerCase() === 'daccountreceivable'))[0],
        dExpireReceivable: mainConfig.filter(item => (item.sName.toLowerCase() === 'dexpirereceivable'))[0],
        bAdvance: mainConfig.filter(item => (item.sName.toLowerCase() === 'badvance'))[0],
        dTotalMoney: mainConfig.filter(item => (item.sName.toLowerCase() === 'dtotalmoney'))[0],
        sSettlementId: mainConfig.filter(item => (item.sName.toLowerCase() === 'ssettlementid'))[0],
        sBankId: mainConfig.filter(item => (item.sName.toLowerCase() === 'sbankid'))[0],
        sBankAccount: mainConfig.filter(item => (item.sName.toLowerCase() === 'sbankaccount'))[0],
        tDueDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tduedate'))[0],
      });
      const sSalesId = mainConfig.filter(item => (item.sName.toLowerCase() === 'ssalesid'))[0];
      sSalesId.bVisible = receiptData.bAdvance === undefined ? false : (receiptData.bAdvance === true || receiptData.bAdvance === 1);
      this.setState({ sSalesId });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      sId, disabled, content, dataSet, sCustomerIdConfig,
    } = nextProps;
    const { dataList } = content;
    const {
      sDataListTabId, returnType, urlData, loading, componentName,
    } = dataList;
    if (dataSet.sCustomerName) {
      dataSet.sCustomerId = dataSet.sCustomerName;
    }
    this.setState({
      disabled,
      dataList: dataSet,
    });
    if (Object.keys(sCustomerIdConfig).length > 0) {
      this.setState({
        sCustomerId: sCustomerIdConfig,
      });
    }
    const { sSalesId } = this.state;
    sSalesId.bVisible = dataSet.bAdvance === undefined ? false : (dataSet.bAdvance === true || dataSet.bAdvance === 1);
    this.setState({ sSalesId });
    const { sCustomerId } = dataSet;
    if (sCustomerId !== undefined && !disabled) {
      /* 分摊按钮是否可编辑 */
      this.setState({ shareDisabled: false });
    } else {
      this.setState({ shareDisabled: true });
    }
    if (this.state.sTabId === sDataListTabId && this.state.sTabId === nextProps.app.currentPane.key
      && this.state.componentName === componentName) {
      if (loading) return;
      if (returnType === 'data') {
        this.setState({
          dataList: urlData,
          sId: sId !== undefined ? sId : '',
        });
      }
      this.setState({ sId });
    }
    const mainConfig = this.state.masterConfig.gdsconfigformslave;
    const sCustomerIdConfig1 = mainConfig.filter(item => (item.sName.toLowerCase() === 'scustomerid'))[0];
    if (dataSet.sBillType) {
      sCustomerIdConfig1.sSqlCondition = { sBillType: dataSet.sBillType };
    }
    if (Object.keys(mainConfig).length > 0) {
      const { sActiveId, app, form } = nextProps;
      const childProps = {
        app, form, sActiveId, sId, dataList, disabled,
      };
      const reserveContent = commonFunc.Reserve(mainConfig, childProps);
      this.setState({ reserveContent });
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { componentName } = nextProps;
    const { sId } = this.props;
    if (sId === undefined) {
      return true;
    }
    let flag = true;
    if (nextState.disabled !== this.state.disabled) {
      return true;
    }
    if (this.state.sTabId === nextProps.app.currentPane.key &&
      this.state.componentName === componentName) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  }

  handleBtnReceipt = () => {
    this.setState({ receiptVisible: true });
  };

  handleBtnShare = () => {
    /* 分摊 */
    this.props.onShare();
  };

  handleCancel = () => {
    this.setState({
      receiptVisible: false,
    });
  };

  handleAutoCheck = () => {
    this.setState({
      receiptVisible: false,
    });
    this.props.onExamine();
  };

  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    const formItemLayout = { labelCol: { span: 10 }, wrapperCol: { span: 12 } };
    const {
      app, form, handleModalPane, dataName, dataType, handleSelectChange, onClose, dataSet,
    } = this.props;
    const {
      sBillType, sCustomerId, sContacts, sPhone,
    } = this.state;
    const { sBillNo, tCreateDate, sMakePerson } = this.state;
    const {
      sSalesManId, sMemo, dAccountReceivable, dExpireReceivable,
    } = this.state;
    const {
      bAdvance, sSalesId, dTotalMoney, /* receiptDisabled, */ shareDisabled,
    } = this.state;
    const {
      sSettlementId, sBankId, sBankAccount, tDueDate,
    } = this.state;
    const {
      dataList, sId, sActiveId, disabled, formData, gdsformconst, reserveContent, expand,
    } = this.state;
    const childProps = {
      app,
      form,
      sActiveId,
      dataList,
      sId,
      disabled,
      handleModalPane,
      handleSelectChange,
      dataName,
      dataType,
      onClose,
    };
    const sBillTypeProps = { showConfig: sBillType, ...childProps };
    const sCustomerIdProps = { showConfig: sCustomerId, ...childProps };
    const sContactsProps = { showConfig: sContacts, ...childProps };
    const sPhoneProps = { showConfig: sPhone, ...childProps };
    const sBillNoProps = { showConfig: sBillNo, ...childProps };
    const tCreateDateProps = { showConfig: tCreateDate, ...childProps };
    const sMakePersonProps = { showConfig: sMakePerson, ...childProps };
    const sSalesManIdProps = { showConfig: sSalesManId, ...childProps };
    const sMemoProps = { showConfig: sMemo, ...childProps };
    const dAccountReceivableProps = { showConfig: dAccountReceivable, ...childProps };
    const dExpireReceivableProps = { showConfig: dExpireReceivable, ...childProps };
    const bAdvanceProps = { showConfig: bAdvance, ...childProps };
    const sSalesIdProps = { showConfig: sSalesId, ...childProps };
    const dTotalMoneyProps = { showConfig: dTotalMoney, ...childProps };
    const sSettlementIdProps = { showConfig: sSettlementId, ...childProps };
    const sBankIdProps = { showConfig: sBankId, ...childProps };
    const sSettlementIdValue = dataSet.sSettlementId !== undefined ? dataSet.sSettlementId : '';
    if (sSettlementIdValue === 'bank' && !disabled) {
      sBankIdProps.disabled = false;
      sBankIdProps.showConfig.bNotEmpty = true;
    } else {
      sBankIdProps.disabled = true;
      sBankIdProps.showConfig.bNotEmpty = false;
    }
    const sBankAccountProps = { showConfig: sBankAccount, ...childProps };
    const tDueDateProps = { showConfig: tDueDate, ...childProps };
    const { receiptVisible, sModalName } = this.state;
    const { dNetMoney } = app.decimals; /* 小数位数 */
    const dBillMoney = dataList.dTotalMoney !== undefined ? dataList.dTotalMoney * 1 : 0;
    const receiptProps = {
      app,
      content: this.props.content,
      formData,
      dBillMoney: dBillMoney.toFixed(dNetMoney),
      gdsformconst,
      sActiveId,
      sId,
      billnosetting: this.props.billnosetting,
    };
    return (
      <div>
        <FormItem className={styles.searchMainForm}>
          <Row type="flex" style={{ height: expand ? 'auto' : '100px', overflow: 'hidden' }}>
            <Col
              span={6}
              order={sBillType.iOrder > 24 ? 24 : sBillType.iOrder}
              style={{ display: sBillType.bVisible ? 'block' : 'none' }}
            >
              <ShowType
                sName="sBillType"
                showDefaultName="收款对象"
                {...sBillTypeProps}
              />
            </Col>
            <Col
              span={6}
              order={sCustomerId.iOrder > 24 ? 24 : sCustomerId.iOrder}
              style={{ display: sCustomerId.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sCustomerId" morePopup showDefaultName="对象名称" {...sCustomerIdProps} />
            </Col>
            <Col
              span={6}
              order={sContacts.iOrder > 24 ? 24 : sContacts.iOrder}
              style={{ display: sContacts.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sContacts" showDefaultName="联系人" {...sContactsProps} />
            </Col>
            <Col
              span={6}
              order={sPhone.iOrder > 24 ? 24 : sPhone.iOrder}
              style={{ display: sPhone.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sPhone" showDefaultName="电话" {...sPhoneProps} />
            </Col>
            <Col
              span={6}
              order={sSalesManId.iOrder > 24 ? 24 : sSalesManId.iOrder}
              style={{ display: sSalesManId.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sSalesManId" showDefaultName="销售员" {...sSalesManIdProps} />
            </Col>
            <Col
              span={6}
              order={sMemo.iOrder > 24 ? 24 : sMemo.iOrder}
              style={{ display: sMemo.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sMemo" textArea showDefaultName="备注" {...sMemoProps} />
            </Col>
            <Col
              span={6}
              order={sBillNo.iOrder > 24 ? 24 : sBillNo.iOrder}
              style={{ display: sBillNo.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sBillNo" showDefaultName="单据号" {...sBillNoProps} />
            </Col>
            <Col
              span={6}
              order={tCreateDate.iOrder > 24 ? 24 : tCreateDate.iOrder}
              style={{ display: tCreateDate.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="tCreateDate" showDefaultName="制单日期" {...tCreateDateProps} />
            </Col>
            <Col
              span={6}
              order={sMakePerson.iOrder > 24 ? 24 : sMakePerson.iOrder}
              style={{ display: sMakePerson.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sMakePerson" showDefaultName="制单人" {...sMakePersonProps} />
            </Col>
            <Col
              span={6}
              order={bAdvance.iOrder > 24 ? 24 : bAdvance.iOrder}
              style={{ display: bAdvance.bVisible ? 'block' : 'none' }}
            >
              <Row>
                <Col span={7}>
                  <ShowType sName="bAdvance" showDefaultName="预收款" {...bAdvanceProps} />
                </Col>
                <Col span={15}>
                  <ShowType sName="sSalesId" showDefaultName="对应原单号" {...sSalesIdProps} labelNo />
                </Col>
              </Row>
            </Col>
            <Col
              span={6}
              order={dAccountReceivable.iOrder > 24 ? 24 : dAccountReceivable.iOrder}
              style={{ display: dAccountReceivable.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="dAccountReceivable" showDefaultName="应收款" {...dAccountReceivableProps} />
            </Col>
            <Col
              span={6}
              order={dExpireReceivable.iOrder > 24 ? 24 : dExpireReceivable.iOrder}
              style={{ display: dExpireReceivable.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="dExpireReceivable" showDefaultName="到期应收" {...dExpireReceivableProps} />
            </Col>
            <Col
              span={6}
              order={dTotalMoney.iOrder > 24 ? 24 : dTotalMoney.iOrder}
              style={{ display: dTotalMoney.bVisible ? 'block' : 'none' }}
            >
              <Row>
                <Col span={17}>
                  <ShowType
                    sName="dTotalMoney"
                    showDefaultName="金额"
                    {...dTotalMoneyProps}
                    formItemLayout={formItemLayout}
                    min={0}
                  />
                </Col>
                <Col span={5}>
                  <Button
                    disabled={shareDisabled}
                    onClick={this.handleBtnShare}
                    style={{ width: '100%' }}
                  >分摊
                  </Button>
                  {/* <Button
                    style={{ marginLeft: '8.5%' }}
                    onClick={this.handleBtnReceipt}
                    disabled={receiptDisabled}
                  >收款</Button> */}
                </Col>
              </Row>
            </Col>
            <Col
              span={6}
              order={sSettlementId.iOrder > 24 ? 24 : sSettlementId.iOrder}
              style={{ display: sSettlementId.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sSettlementId" showDefaultName="付款条件" {...sSettlementIdProps} />
            </Col>
            <Col
              span={6}
              order={sBankId.iOrder > 24 ? 24 : sBankId.iOrder}
              style={{ display: sBankId.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sBankId" showDefaultName="银行" {...sBankIdProps} />
            </Col>
            <Col
              span={6}
              order={sBankAccount.iOrder > 24 ? 24 : sBankAccount.iOrder}
              style={{ display: sBankAccount.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="sBankAccount" showDefaultName="银行号码" {...sBankAccountProps} />
            </Col>
            <Col
              span={6}
              order={tDueDate.iOrder > 24 ? 24 : tDueDate.iOrder}
              style={{ display: tDueDate.bVisible ? 'block' : 'none' }}
            >
              <ShowType sName="tDueDate" showDefaultName="tDueDate" {...tDueDateProps} />
            </Col>
            {reserveContent}
          </Row>
          <button className={styles.collapseA} onClick={this.handleToggle}>
            <span>{expand ? '缩略展示' : '显示全部'}</span><Icon type={expand ? 'up' : 'down'} />
          </button>
        </FormItem>
        <Modal
          title={sModalName}
          visible={receiptVisible}
          width={1000}
          onCancel={this.handleCancel}
          footer={null}
        >
          <ReceiptPopup
            {...receiptProps}
            onAutoCheck={this.handleAutoCheck}
            onClose={this.handleCancel}
          />
        </Modal>
      </div>
    );
  }
}

export default TabMainTableComponent;
